<d-row [dFlex]="1" [dFlexContainer]="'column'" [dAlign]="'stretch'" [dGutter]="[0,8]" [dStyle]="{'height':'100%'}">
  <d-col>
    <d-alert type="info" [closeable]="false" [showIcon]="false">
      {{'menu.photoParams'|translate}}
    </d-alert>
  </d-col>
  <d-col dFlexContainer="row" dJustify="center">
    <d-data-table tableLayout="fixed" tableOverflowType="overlay" shadowType="embed" [containFixHeaderHeight]="true"
      [fixHeader]="true" [resizeable]="true" [scrollable]="true" [dataSource]="photoParams"
      [tableWidthConfig]="tableWidthConfig">
      <thead dTableHead>
        <tr dTableRow>
          <th dHeadCell *ngFor="let col of columnOptions">{{ col.header }}</th>
        </tr>
      </thead>
      <tbody dTableBody>
        <ng-template let-rowItem="rowItem" let-rowIndex="rowIndex">
          <tr dTableRow>
            <td dTableCell *ngFor="let col of columnOptions">
              <div [ngSwitch]="col.field">
                <div *ngSwitchCase="'exposureValue'">{{ rowItem[col.field]||'0' }}</div>
                <div *ngSwitchCase="'shutterSpeed'">{{ rowItem[col.field]|addUnit:'s' }}</div>
                <div *ngSwitchCase="'whiteBalance'">{{ rowItem[col.field]|addUnit:'K' }}</div>
                <div *ngSwitchDefault>{{ rowItem[col.field] }}</div>
              </div>
            </td>
          </tr>
        </ng-template>
      </tbody>
    </d-data-table>
  </d-col>
</d-row>
